<template>
	<view class="content">
		<!-- 搜索框内容 -->
		<view class="searchContent">
			<image src="../../static/message/searchImg.png" class="searchImg" @tap="search"></image>
			<input placeholder="搜索咨询" placeholder-class="placeholder" v-model="queryKey" @input="search" />
			<view class="cancel" @tap="close">取消</view>
		</view>
		<!-- 搜索内容 -->
		<view class="list" v-for="(item,index) in list" :key="index" @tap="goDetail(item)">
			<image src="../../static/message/search.png" class="search"></image>
		  <view class="text">{{item.title}}</view>
		</view>
		<!-- 搜索历史 -->
		<view class="historyContent" v-if="list.length == 0">
			<view class="titleContent">
				<view class="title">搜索历史</view>
				<view class="delContent" v-if="newHis.length != 0" @tap="clear">
					<image src="../../static/message/del.png" class="delImg"></image>
				  清空历史
				</view>
			</view>
			<!-- 历史记录 -->
			<view class="historyList" v-for="(item,index) in newHis.slice(0,5)" :key="index" @tap="goDetail(item)">
				{{item.title}}
			</view>
			<view class="noneList" v-if="newHis.length == 0">当前暂无历史数据</view>
		</view>
	</view>
</template>

<script>
	import { indexInfo } from '../../api/api.js'
	export default {
		data() {
			return {
				// 查询条件
				queryKey:'',
				// 查询列表
				list:'',
				// 搜索记录
				history:[],
				// 历史记录
				newHis:[]
			}
		},
		onShow() {
			this.list = []
			// 获取缓存中的搜索记录
			var historical_record = uni.getStorageSync('historical_record')
			// 如果已经存在搜索记录,则获取到其中的值,如果不存在搜索记录,初始化history
			if( historical_record ) {
				this.history = historical_record  
				this.newHis  = Array.from(new Set(this.history)) 
			}else {
				this.history = []
			}
		},
		methods: {
			// 查询
			search() {
				let data = {
					pageNum:1,
					pageSize:100,
					queryKey:this.queryKey
				}
				indexInfo(data).then( res=> {
					this.list = res.data.records
				})
			},
			// 取消搜索
			close() {
				this.queryKey = ''
				this.list = ''
				uni.navigateBack({
					delta:1
				})
			},
			// 前往动态详情页面
			goDetail(item) {
				this.history.unshift(item)
				this.history = this.history
				// 把搜索记录存到缓存中
				uni.setStorageSync('historical_record',this.history)
				uni.navigateTo({
					url:'./infoDetail?id=' + item.id
				})
			},
			// 清空历史记录
			clear() {
				uni.clearStorage('historical_record')
				this.newHis = ''
			}
		}
	}
</script>

<style lang="less">
  .searchContent {
		display: flex;
		align-items: center;
		position: relative;
		margin: 89rpx 0 14rpx 30rpx;
		.searchImg {
			position: absolute;
			top: 20rpx;
			left: 30rpx;
			width: 32rpx;
			height: 32rpx;
		}
		input {
			padding-left: 74rpx;
			width: 520rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			border: 1rpx solid #CCCCCC;
		}
		.placeholder {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 37rpx;
		}
		.cancel {
			height: 72rpx;
			line-height: 72rpx;
			width:100rpx ;
			margin-left: 30rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1A1A1A;
		}
	}
	// 搜索内容
	.list {
		display: flex;
		align-items: center;
		margin: 36rpx 0 0 30rpx;
		padding-bottom: 24rpx;
		width: 690rpx;
		border-bottom:1rpx solid #F2F2F2;
		.search {
			width: 32rpx;
			height: 32rpx;
		}
		.text {
			width: 537rpx;
			margin-left: 16rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #353535;
			line-height: 40rpx;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
	}
	// .搜索历史 
	.historyContent {
		margin:40rpx 0 0 30rpx;
		.titleContent {
			width: 690rpx;
			display: flex;
			justify-content: space-between;
			.title {
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1A1A1A;
				line-height: 50rpx;
			}
			.delContent {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #353535;
				line-height: 33rpx;
				.delImg {
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
				}
			}
		}
		.historyList {
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			width: 690rpx;
			padding-bottom: 24rpx;
			margin-top: 36rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #353535;
			line-height: 40rpx;
			border-bottom:1rpx solid #F2F2F2;
		}
		.noneList {
			width: 690rpx;
			text-align: center;
			margin-top: 80rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 37rpx;
		}
	}
</style>
